// 引入 Increacement 组件
import { CompletedReduxCounterComponent } from '../components'
// 引入 connect 用于链接 UI 组件和 redux
import { connect } from 'react-redux'
// 引入 action
import { createIncrementAction, createDecrementAction, createAsyncInreacementAction } from '../redux/counter_action'

// connect() 的第一个参数，是一个返回一个对象的函数，该函数返回的对象会 map 成 key(状态名)-value(状态值) 的的形式，传递到 UI 组件的 props 中去
const mapStateToProps = state => {
    return {
        count: state
    }
}

// connect() 的第二个参数，是一个返回一个对象的函数，该函数返回的对象会 map 成 key(事件名)-value(dispatch操作事件的方法) 的的形式，传递到 UI 组件的 props 中去
const mapDispatchToProps = dispatch => {
    return {
        increment: data => dispatch(createIncrementAction(data)),
        decrement: data => dispatch(createDecrementAction(data)),
        asyncIncrement: (data, time) => dispatch(createAsyncInreacementAction(data, time))
    }
}

// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CompletedReduxCounterComponent)